<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Restful Example--User Management</title>

<jsp:include page="../header.jsp"><jsp:param name="groups" value="jquery,jquery-ui,jqgrid,validation,common,ztree,layout"/></jsp:include>

<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="search_scheme.js"></script>
<script type="text/javascript" src="search_template.js"></script>


<style type="text/css">
TABLE.commonParamTable { 
	font-size: 12px;
	BORDER-RIGHT: #DDDDDD 1px solid; 
	BORDER-TOP: #DDDDDD 1px solid; 
	BORDER-LEFT: #DDDDDD 1px solid; 
	BORDER-BOTTOM: #DDDDDD 1px solid; 
	WIDTH: 100%; 
	/*BACKGROUND-COLOR: #ffffff*/
}
TABLE.commonParamTable THEAD TD{ PADDING-LEFT: 5px; PADDING-RIGHT: 5px; text-align:left; background-color:#DDDDDD; color:#FFFFFF;
font-size: 12px; font-weight:bold; height: 25px}
TABLE.commonParamTable TBODY TD{height:20px; background-color: #f1f3f5; color:#000000; padding:2px;font-size: 12px; }
TABLE.commonParamTable TFOOT TD{ background-color: #D5E0F0; text-align:center; color:#000000; height: 24px; padding:2px;}
TABLE.commonParamTable A:link,A:active,A:visited{TEXT-DECORATION:underline ;Color:#000000}
TABLE.commonParamTable A:hover{TEXT-DECORATION: underline;Color:#4455aa }

TABLE.commonParamTable TD.col1{BACKGROUND:#e4edf9; text-align:right; WIDTH:120px; }
TABLE.commonParamTable TD.col2{width:80px; text-align:center;  }
TABLE.commonParamTable TD.col3{width:160px; text-align:center; }
TABLE.commonParamTable TD.col3 INPUT{WIDTH:150px;}
TABLE.commonParamTable TD.col4{text-align:left; }
TABLE.commonParamTable TD.col4 INPUT{WIDTH:150px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
	

	$('#userSearch').search({
		title: '用户查询',//标题
		searchUrl: '/eshop/widget/SearchTestAction/query.do',
		defaultScheme: {//默认方案
			inputs: [ //默认查询条件
				{name:"username",label:"用户名", operator:"=", relation:"and", order:0, value:"admin"}, 
		        {name:"name", label:"姓名", operator:"like", relation:"and", order:1}
	        ],
			results: [ //默认查询结果列
	   			{name:"username", width:100, order:0},
	   			{name:"email", width:100, order:1}
   	        ],
			sortName: 'username',
			sortOrder: "desc"
		},
		inputs: { //查询项
			"username":{type:"TEXT", label:"用户名", repeatable: true},
			"name":{type:"TEXT", label:"姓名", repeatable: true},
			"email":{type:"TEXT", label:"E-Mail", repeatable: false}
		},
		results: { //查询结果列
   			"username": {label:"用户名", width:100, sortable:true},
   			"name": {label:"姓名", width:80, sortable:true},
   			"email": {label:"E-Mail", width:80, sortable:false}
		},
		hasFooterRow: true,  //Display footer row or not
		isDefineScheme: true,//是否显示方案下拉框,true/false,默认为true
		prefix: 'queryParam.',
		columnCount: 3, //设置一行为3列方式显示
		autoOnSearch: true,  //页面加载时自动进行搜索
		beforeSearch: function() { 
			//Added you customized methods in here, before the triger the search operation.
			return true; //return true go next operation.
		}
	});

});
</script>

</head>
<body>

<br/>

<div id="userSearch">
</div>


<div id="schemeNameModify_dialog" align="center">
	<form id="schemeNameModify_form">
	方案名称:&nbsp;&nbsp;<input type="text" name="schemeName" value=""></input>
	</form>
</div>

<div id="schemeNameAdd_dialog" align="center">
	<form id="schemeNameAdd_form">
	方案名称:&nbsp;&nbsp;<input type="text" name="schemeName" value=""></input>
	</form>
</div>

<div id="schemeConfig_dialog">
	<form id="schemeConfig_form">
		<table class="commonParamTable" width="100%">
			<tr>
				<td style="text-align:left;">
					<!-- 搜索方案下拉框 -->
					&nbsp;搜索方案名称：<select name="schemeId" style="width:150px;"></select>
					<!-- 下来框后边的三个操作按钮 -->
					<button name="createSchemeButton">新建</button>
					<button name="renameSchemeButton">重命名</button>
					<button name="deleteSchemeButton">删除</button>
				</td>
			</tr>
		</table>
		<div align="center" name="tabs">
		<ul>
			<li><a name="paramTab" href="#schemeConfig_paramTab" >查询条件</a></li>
			<li><a name="resultTab" href="#schemeConfig_resultTab" >查询结果列</a></li>
		</ul>
		<div id="schemeConfig_paramTab">
			<table class="commonParamTable" width="100%">
				<tr>
					<td valign="top">
						<table width="100%" cellpadding="0" cellspacing="0">
							<tr>
								<!-- 搜索条件下拉框 -->
								<td style="text-align:left;valign:bottom;border-right:1px solid #B5B6B6;" width="73%">
									<br/>
									<font><b>可选条件：</b></font>
								</td>
								<td style="border-right:1px solid #B5B6B6;" width="26%">&nbsp;</td>
							</tr>
							<tr>
								<td valign="top" style="border-right:1px solid #B5B6B6;">
									<select name="inputList" size="18" style="width:100px;"></select>
								</td>
								<td style="border-right:1px solid #B5B6B6;">
									<!-- 添加搜索添加的"+"按钮 -->
									<button name="inputAddButton" style="width:30px;height:25px;">+</button>
								</td>
							</tr>
						</table>
					</td>
					<td valign="top">
						<table cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td>
									<br/>
									<div style="OVERFLOW-y:auto;height:280px;width:630px;border:1px solid #B5B6B6;">
										<table name="addedInputTable" class="ui-widget ui-widget-content" width="100%">
											<thead>
												<tr class="ui-widget-header">
													<td width="8%">关系</td>
													<td width="15%">搜索项</td>
													<td width="10%">表达式</td>
													<td >默认值</td>
													<td width="7%">次序</td>
													<td width="7%">删除</td>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
		<div id="schemeConfig_resultTab">
			<table class="commonParamTable" width="100%">
				<tr>
					<td valign="top">
						<table width="100%" cellpadding="0" cellspacing="0">
							<tr>
								<!-- 搜索条件下拉框 -->
								<td style="text-align:left;valign:bottom;border-right:1px solid #B5B6B6;" width="73%">
									<br/>
									<font><b>可选结果列：</b></font>
								</td>
								<td style="border-right:1px solid #B5B6B6;" width="26%">&nbsp;</td>
							</tr>
							<tr>
								<td valign="top" style="border-right:1px solid #B5B6B6;">
									<select name="resultList" size="18" style="width:100px;"></select>
								</td>
								<td style="border-right:1px solid #B5B6B6;">
									<!-- 添加搜索添加的"+"按钮 -->
									<button name="resultAddButton" style="width:30px;height:25px;">+</button>
								</td>
							</tr>
						</table>
					</td>
					<td valign="top">
						<table cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td>
									<br/>
									<div style="OVERFLOW-y:auto;height:280px;width:630px;border:1px solid #B5B6B6;">
										<table name="addedResultTable" class="ui-widget ui-widget-content" width="100%">
											<thead>
												<tr class="ui-widget-header">
													<td width="40%">列名称</td>
													<td width="20%">排序</td>
													<td width="15%">列宽</td>
													<td width="15%">次序</td>
													<td width="10%">删除</td>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>
	</form>
</div>


</body>
</html>

	